<template>
  <div>
    <!--卡片-->
    <el-card class="box-card">
      <!--定义面包屑-->
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员优惠券</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
      <!--表单的搜索框
           :model="双向绑定表单的数据"
      -->
      <el-form :inline="true" :model="couponSelect"  class="demo-form-inline">
        <el-form-item label="优惠券id">
          <el-input v-model="couponSelect.id" placeholder="请输入优惠券id"></el-input>
        </el-form-item>
        <el-form-item label="门店名" prop="shopId" >
          <template>
            <el-select v-model="couponSelect.shopId" placeholder="请选择门店名">
              <el-option
                  v-for="item in shop"
                  :key="item.id"
                  :label="item.shopName"
                  :value="item.id">
                <span style="float: left">{{ item.shopName }}</span>
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="优惠卷类型">
          <el-select v-model="couponSelect.type" placeholder="请选择优惠卷类型">
            <el-option
                v-for="item in optionType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券名">
          <el-input v-model="couponSelect.name" placeholder="请输入优惠券名"></el-input>
        </el-form-item>
        <el-form-item label="使用平台">
          <el-select v-model="couponSelect.platform" placeholder="请选择使用平台">
            <el-option
                v-for="item in optionUsePlatform"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开始的日期">
          <div class="block">
            <el-date-picker
                v-model="couponSelect.startTime"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          </el-form-item>
        <el-form-item label="结束的日期">
          <div class="block">
            <el-date-picker
                v-model="couponSelect.endTime"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="使用类型">
          <el-select v-model="couponSelect.useType" placeholder="请选择使用类型">
            <el-option
                v-for="item in optionUseType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领取的日期">
          <div class="block">
            <el-date-picker
                v-model="couponSelect.enableTime"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="initUserTable">查询</el-button>
          <el-button type="primary" @click="add" >添加</el-button>
        </el-form-item>
      </el-form>

      <!--数据表格-->
      <template>
        <el-table
            :data="tableData"
            :border="true"
            stripe
            style="width: 100%">
          <!--            height="666"-->
          <el-table-column
              prop="id"
              label="优惠券id"
              fixed="left"
              width="95px"
              sortable
          >
          </el-table-column>
          <el-table-column
              prop="shopId"
              label="门店名"
              fixed="left"
              width="120px"
              sortable
          >
            <template slot-scope="scope">
              <span  v-for="item in shop" >
                <span v-if="scope.row.shopId===item.id">
                    {{item.shopName}}
                </span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
              prop="type"
              label="优惠卷类型"
              sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.type===0">全场赠券</span>
              <span v-if="scope.row.type===1">会员赠券</span>
              <span v-if="scope.row.type===2">消费赠券</span>
              <span v-if="scope.row.type===3">注册赠券</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              label="优惠券名"
              sortable>
          </el-table-column>
          <el-table-column
              prop="platform"
              label="使用平台"
              sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.platform===0">全部</span>
              <span v-if="scope.row.platform===1">移动</span>
              <span v-if="scope.row.platform===2">PC</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="count"
              label="数量"
              sortable>
          </el-table-column>
          <el-table-column
              prop="amount"
              label="金额"
              sortable>
          </el-table-column>
          <el-table-column
              prop="perLimit"
              label="每人限领张数"
              sortable>
          </el-table-column>
          <el-table-column
              prop="minPoint"
              label="使用门槛"
              sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.minPoint===0">无门槛</span>
              <span v-if="scope.row.minPoint>1">{{scope.row.minPoint}}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="startTime"
              label="开始时间"
              sortable>
          </el-table-column>
          <el-table-column
              prop="endTime"
              label="结束时间"
              sortable>
          </el-table-column>
          <el-table-column
              prop="useType"
              label="使用类型"
              sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.useType===0">全场通用</span>
              <span v-if="scope.row.useType===1">指定分类</span>
              <span v-if="scope.row.useType===2">指定车辆</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="note"
              label="备注"
              sortable>
          </el-table-column>
          <el-table-column
              prop="publishCount"
              label="发行数量"
              sortable>
          </el-table-column>
          <el-table-column
              prop="useCount"
              label="已使用数量"
              sortable>
          </el-table-column>
          <el-table-column
              prop="receiveCount"
              label="领取数量"
              sortable>
          </el-table-column>
          <el-table-column
              prop="enableTime"
              label="可以领取的日期"
              sortable>
          </el-table-column>
          <el-table-column
              prop="code"
              label="优惠码"
              sortable>
          </el-table-column>
          <el-table-column
              prop="memberLevel"
              label="可领取的会员等级"
              sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.memberLevel===0">无限制</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="180px">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" circle @click="updatecoupon(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete"  circle  @click="open(scope.row.id)"></el-button>
              <!--              <el-button type="warning" icon="el-icon-star-off" circle @click="showUserRole(scope.row.userId)"></el-button>-->
            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </template>
    </el-card>
    <el-dialog
        :title="titleName"
        :visible.sync="fenRoleDialog"
        width="30%"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="优惠券id" style="display: none">
          <el-input v-model="ruleForm.id" ></el-input>
        </el-form-item>
        <el-form-item label="门店名" prop="shopId" >
          <template>
            <el-select v-model="ruleForm.shopId" placeholder="请选择">
              <el-option
                  v-for="item in shop"
                  :key="item.id"
                  :label="item.shopName"
                  :value="item.id">
                <span style="float: left">{{ item.shopName }}</span>
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="优惠卷类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio :label="0" >全场赠券</el-radio>
            <el-radio :label="1" >会员赠券</el-radio>
            <el-radio :label="2" >消费赠券</el-radio>
            <el-radio :label="3" >注册赠券</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="优惠券名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="使用平台" prop="platform">
          <el-radio-group v-model="ruleForm.platform">
            <el-radio :label="0" >全部</el-radio>
            <el-radio :label="1" >移动</el-radio>
            <el-radio :label="2" >PC</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数量" prop="count">
          <el-input v-model="ruleForm.count"></el-input>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model="ruleForm.amount"></el-input>
        </el-form-item>
        <el-form-item label="每人限领张数" prop="perLimit">
          <el-input v-model="ruleForm.perLimit"></el-input>
        </el-form-item>
        <el-form-item label="使用门槛" prop="minPoint">
          <el-input v-model="ruleForm.minPoint"></el-input>
        </el-form-item>
        <el-form-item label="活动时间" prop="time">
          <div class="block">
            <el-date-picker
                v-model="time"
                type="datetimerange"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="使用类型" prop="useType">
          <el-radio-group v-model="ruleForm.useType">
            <el-radio :label="0" >全场通用</el-radio>
            <el-radio :label="1" >指定分类</el-radio>
            <el-radio :label="3" >指定车辆</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="ruleForm.note"></el-input>
        </el-form-item>
        <el-form-item label="发行数量" prop="publishCount">
          <el-input v-model="ruleForm.publishCount"></el-input>
        </el-form-item>
        <el-form-item label="已使用数量" prop="useCount">
          <el-input v-model="ruleForm.useCount"></el-input>
        </el-form-item>
        <el-form-item label="领取数量" prop="receiveCount">
          <el-input v-model="ruleForm.receiveCount"></el-input>
        </el-form-item>
        <el-form-item label="可以领取的时间" prop="enableTime">
          <div class="block">
            <el-date-picker
                v-model="ruleForm.enableTime"
                align="right"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="优惠码" prop="code">
          <el-input v-model="ruleForm.code"></el-input>
        </el-form-item>
        <el-form-item label="可领取的会员等级" prop="memberLevel">
          <el-input v-model.number="ruleForm.memberLevel"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveOrUpdate()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
          <el-button @click="fenRoleDialog =false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Coupon",

  data(){
    var checkLevels = (rule, value, callback) => {
      // console.log(this.levels[this.levels.length-1].id)
      if(value>this.levels[this.levels.length-1].id){
        return callback(new Error('超过当前最大等级'+this.levels[this.levels.length-1].id+'级'));
      }
    };
    return {
      //条件搜索对象
      couponSelect:{},
      //表格数据
      tableData:[],
      //每页显示的条数
      pageSize: 5,
      //当前的显示的页码
      currentPage:1,
      //总条数
      total:0,
      //分配角色框的显示
      fenRoleDialog:false,
      //表单元素
      ruleForm:{},
      //表单校验规则
      rules: {
        name: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
        count:[
          { required: true, message: '请输入优惠券数量', trigger: 'blur' },
          {pattern:/^[1-9]\d*$/,message: '请输入非零正整数', trigger: 'blur'}
        ],
        amount:[
          {pattern:/^[1-9][0-9]*$/,message: '请输入正确的金额', trigger: 'blur'}
        ],
        perLimit:[
          {pattern:/^[1-9]\d*$/,message: '请输入非零正整数', trigger: 'blur'}
        ],
        minpoint:[
          {pattern:/^[1-9]\d*$/,message: '请输入非零正整数', trigger: 'blur'}
        ],
        publishCount:[
          {pattern:/^[1-9]\d*$/,message: '请输入非零正整数', trigger: 'blur'}
        ],
        useCount:[
          {pattern:/^\d+$/,message: '请输入自然数', trigger: 'blur'}
        ],
        receiveCount:[
          {pattern:/^\d+$/,message: '请输入自然数', trigger: 'blur'}
        ],
        code:[
          { required: true, message: '请输入优惠码', trigger: 'blur' },
        ],
        memberLevel:[
          { required: true, message: '请输入会员等级', trigger: 'blur' },
          {pattern:/^\d+$/,message: '请输入自然数', trigger: 'blur'},
          { validator: checkLevels, trigger: 'blur' }
        ]
      },
      //会员等级数据
      levels:[],
      //门店数据
      shop:[],
      titleName:"",
      time: [],
      //快捷时间
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      optionType: [{
        value: 0,
        label: '全场赠券'
      }, {
        value: 1,
        label: '会员赠券'
      }, {
        value: 2,
        label: '消费赠券'
      }, {
        value: 3,
        label: '注册赠券'
      }],
      optionUsePlatform: [{
        value: 0,
        label: '全部'
      }, {
        value: 1,
        label: '移动'
      }, {
        value: 2,
        label: 'PC'
      }],
      optionUseType: [{
        value: 0,
        label: '全场通用'
      }, {
        value: 1,
        label: '指定分类'
      }, {
        value: 2,
        label: '指定车辆'
      }],

    }
  },
  //加载玩调用
  created() {
    this.initUserTable();
    this.getLevel();
    this.getshop();
  },

  methods:{
    handleClose(){
    },
    //清空表单
    resetForm() {
      this.$nextTick(function(){
        this.$refs.ruleFormRef.resetFields();
      })
    },
    //1.初始化用户列表
    initUserTable(){
      var that= this;
      this.$http.post(`/members/coupon/get/${this.currentPage}/${this.pageSize}`,this.couponSelect).then(function (r) {
        that.tableData=r.data.result.records;
        that.total=r.data.result.total;
      })
    },
    //切换用户状态
    switchStatus(data){
      // alert(userId+"---"+status)
      this.ruleForm=JSON.parse(JSON.stringify(data))
      this.saveOrUpdate()
    },
    // 点击添加
    add(){
      this.titleName="添加";
      this.fenRoleDialog=true;
      //清空表单 不要使用 this.resetForm()会出现页面刚加载时点击添加，表单输入数据不显示的bug
      this.ruleForm={}

    },
    //点击修改弹出修改的弹出窗
    updatecoupon(data){
      this.titleName="修改"
      this.fenRoleDialog=true;
      this.ruleForm=JSON.parse(JSON.stringify(data))
      this.time.push(this.ruleForm.startTime);
      this.time.push(this.ruleForm.endTime);
    },
    //确认提交
    saveOrUpdate(){

      let that =this;
        this.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            this.ruleForm.startTime=this.time[0]
            this.ruleForm.endTime=this.time[1]
            this.$http.post("/members/coupon/saveOrUpdate",this.ruleForm).then(function (r) {
              that.fenRoleDialog=false;
              that.$message.success(r.data.message)
              that.initUserTable();
            })
          } else {
            this.$message.error("请将信息填写完整")
            return false;
          }
        });
    },
    //当改变没有显示的条数时触发该方法
    handleSizeChange(y){
      this.pageSize=y;
      this.initUserTable();
    },
    //切换页码时触发该方法
    handleCurrentChange(y){
      this.currentPage=y;
      this.initUserTable();
    },
    // 点击删除弹出确认窗口
    open(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.deleteById(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //删除的方法
    deleteById(id){
      let that=this
      this.$http.delete(`/members/coupon/delect/${id}`).then(function (r){
        that.$message.success(r.data.message)
        that.initUserTable();
      })
    },
    //获取shop
    getshop(){
     let that=this;
     this.$http.get("lease/shop/getAllShop").then(function (r){
      that.shop=r.data.result.shop;
     })
    },

    // 获取level
    getLevel(){
      let that=this;
      this.$http.post("/members/level/get").then(function (r){
        that.levels=r.data.result.levels;
      })
    }
  }
}
</script>

<style scoped>

</style>
